<template>
    <div class="grid grid-cols-2 gap-4 p-4 mt-4">
        <div class="relative overflow-hidden rounded-lg bg-gray-50">
            <div class="h-8 absolute left-0 top-0 right-0 bottom-0 bg-gradient-to-b from-[#b7ddd1] ">
                <div class="absolute bg-[#aad9ca] w-6 h-6 -top-2 rounded-sm rotate-45"></div>
                <div class="absolute bg-[#aad9ca] w-7 h-7 -top-1 right-4 rounded-sm rotate-45"></div>
                <div class="absolute bg-[#aad9ca] w-3 h-3 -top-1  right-14 rounded-sm rotate-45"></div>
            </div>
            <div class="relative z-10">
                <div class="flex items-center px-4 py-2 space-x-2 align-text-bottom">
                    <div class="text-base font-bold text-gray-800">好物拼团</div>
                    <div class="text-xs text-[#7dc2aa] font-bold">更省钱</div>
                </div>
                <div class="px-4 text-xs text-gray-500">
                    <div>2 人团 、5 人团</div>
                </div>
                <div class="grid justify-around grid-cols-2 py-4 text-sm text-center text-red-400">
                    <div>
                        <img :src="g1" class="h-16 mx-auto"/>
                        <div class="mt-1">最低 1 元</div>
                    </div>
                    <div>
                        <img :src="g2" class="h-16 mx-auto"/>
                        <div class="mt-1">最低 1 元</div>
                    </div>
                </div>
            </div>
        </div>
      
        <div class="relative overflow-hidden rounded-lg bg-gray-50">
            <div class="h-8 absolute left-0 top-0 right-0 bottom-0 bg-gradient-to-b from-[#ebe2b8] ">
                <div class="absolute bg-[#f3d9a5] w-6 h-6 -top-2 rounded-sm rotate-45"></div>
                <div class="absolute bg-[#f3d9a5] w-7 h-7 -top-1 right-4 rounded-sm rotate-45"></div>
                <div class="absolute bg-[#f3d9a5] w-3 h-3 -top-1  right-14 rounded-sm rotate-45"></div>
            </div>
            <div class="relative z-10">
                <div class="flex items-center px-4 py-2 space-x-2 align-text-bottom">
                    <div class="text-base font-bold text-gray-800">新人专享</div>
                    <div class="text-xs text-[#ebcc73] font-bold">超值大礼</div>
                </div>
                <div class="px-4 text-xs text-gray-500">
                    <div>福利不断，红包不停！</div>
                </div>
                <div class="grid grid-cols-2 py-4 text-sm text-center text-red-400">
                    <div class="">
                        <img :src="g1" class="h-16 mx-auto"/>
                        <div class="mt-1">买 1 送 1 </div>
                    </div>
                    <div>
                        <img :src="g2" class="h-16 mx-auto"/>
                        <div class="mt-1">最低 1 折起</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import g1 from '~/assets/shop/goods/g1.png'
import g2 from '~/assets/shop/goods/g2.png'
import g3 from '~/assets/shop/goods/g3.png'
</script>
    
<style></style>